<template>
  <div>
    <div style="display: flex; justify-content: flex-end; margin: 10px">
      <a-button type="primary" @click="back(null)">返回上一级</a-button>
    </div>
    <div
      style="width:200px;display:flex; justify-content: space-between;margin-bottom:20px"
    >
      <a-upload
        name="file"
        :multiple="false"
        :customRequest="handleChange"
        :showUploadList="false"
      >
        <a-button> <a-icon type="upload" />上传视频</a-button>
      </a-upload>
      <a-button @click="save" type="primary " style="margin: 0 20px;">
        保存
      </a-button>
      <a-popconfirm
          title="你确定更要删除吗?"
          @confirm="delVideo()"
          @cancel="cancel"
          okText="确定"
          cancelText="取消"
        >
          <a-button size="" type="danger">删除</a-button>
        </a-popconfirm>
    </div>
    <!-- <div ref="editor"></div> -->
    <div style="width:450px;height:250px" :class="test == '' ? 'active' : ''">
      <video width="100%" height="100%" :src="test" autoplay controls></video>
    </div>
  </div>
</template>
<script>
import E from "wangeditor-antd";
import api from "@/api/api.js";
import UploadImg from "../../components/uploadImg.vue";
import { quillEditor } from "vue-quill-editor";
import { quillRedefine } from "vue-quill-editor-upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  name: "editor",
  props: ["get-full-text", "content"], //回调方法
  components: {
    UploadImg
  },
  data() {
    return {
      id: "",
      param: this.$route.query.param,
      type: this.$route.query.type,
      videoUrl: "",
      test: ""
    };
  },
  // mounted() {
  //   var editor = new E(this.$refs.editor);
  //   editor.customConfig.customUploadImg = function(files, insert) {
  //     var formData = new FormData();
  //     formData.append("files", files[0]);
  //     console.log(formData);
  //     api.tinymcePic(formData).then(res => {
  //       if ((res.code = 200)) {
  //         var url = res.result[0];
  //         insert(url);
  //       }
  //     });
  //   };
  //   this.editor = editor;
  //   editor.create();
  // },

  methods: {
    // 上传视频
    async handleChange({ file }) {
      console.log(file);
      if (file.status === "done") {
        this.$message.success(`${file.name} file uploaded successfully`);
      } else if (file.status === "error") {
        this.$message.error(`${file.name} file upload failed.`);
      }
      var formData = new FormData();
      formData.append("files", file);
      formData.append("type", "");
      console.log(formData);
      let res = await api.uploadVideo(formData);
      if (res.code == 200) {
        this.videoUrl = res.result;
      }
    },
    back() {
      if (this.type == 1) {
        this.$router.push("film");
      } else if (this.type == 2) {
        this.$router.push("problem");
      } else {
        this.$router.push("liaison");
      }
    },
    getPlan() {
      api
        .getHelp({
          helpId: this.param
        })
        .then(res => {
          if (res.code == 200) {
            this.test = res.result.content;
            // this.editor.txt.html(res.result.content);
          }
        });
    },
    save() {
      api
        .saveHelp({
          type: this.type,
          helpId: this.param,
          content: this.videoUrl
        })
        .then(res => {
          if (res.code == 200) {
            this.$message.success("更新成功");
            this.getPlan();
          }
        });
    },
    delVideo() {
      api
        .saveHelp({
          type: this.type,
          helpId: this.param,
          content: "",
        })
        .then(res => {
          if (res.code == 200) {
            this.$message.success("更新成功");
            this.getPlan();
          }
        });
    }
  },
  created() {
    this.getPlan();
    console.log(this.test);
  }
};
</script>

<style lang="scss" scoped="" type="text/css">
.editable-row-operations a {
  margin-right: 8px;
}
.top-btn {
  padding: 10px;
}
.code-img {
  display: block;
  width: 150px;
}
.active {
  display: none;
}
</style>
